import { Component, OnInit } from '@angular/core';
import { Product, ProductService, ProdComment } from '../shared/product.service';
import { FormControl } from '@angular/forms';
import { FilterPipe } from '../pipe/filter.pipe';
import { Observable } from 'rxjs';
import { Http } from '@angular/http';
import 'rxjs-compat';
import 'rxjs/Rx';

@Component({
  selector: 'app-product',
  templateUrl: './product.component.html',
  styleUrls: ['./product.component.css']
})
export class ProductComponent implements OnInit {
  products: any[];
  private dataSource: Observable<any>
  wordInput: FormControl = new FormControl();
  keyword: string;
  private comments: ProdComment[];
  constructor(private _productService: ProductService, private _http: Http) {
    this.wordInput.valueChanges
      .subscribe(word => {
        this.keyword = word;
        //this.products = this.products | FilterPipe("name", this.keyword);
      });
    this.dataSource = this._productService.getProducts();
  }

  ngOnInit() {
    console.log(this._http);
    this.dataSource.subscribe(data => {
      this.products = data;
    });
    this._productService.searchEvent.subscribe(params => {
      this._productService.getProductsBySearchParams(params).subscribe(data => {
        this.products = data;
      });
    });
  }
}
